<template>
  <div class="platform-num-setting">
    <!-- 头部 -->
    <header>
      <button class="new-add-btn" @click="openModul">新增平台</button>
    </header>
    <!-- 表格 -->
    <div class="table-box">
      <s-table :columns="TableHead" :data="TableData">
        <div slot="action" slot-scope="{ row, column , index }">
          <Button type="primary" size="small" style="margin-right: 5px" @click="openModul">编辑</Button>
          <SDelButton></SDelButton>
        </div>
      </s-table>
    </div>
    <!-- 分页器 -->
    <footer class="footer">
      <SPage @pageChagne='pageChagne'></SPage>
    </footer>
    <!-- 弹出框 -->
    <s-popup-box :visible='visible' @cancel='cancel'>
      <Form :model="formData" :label-width="100">
        <FormItem label="平台名称:">
          <Input type="text" v-model="formData.user" placeholder="">
          </Input>
        </FormItem>
        <FormItem label="平台ID:">
          <Input type="password" v-model="formData.password" placeholder="">
          </Input>
        </FormItem>
        <FormItem label="平台价格系数:">
          <Input type="password" v-model="formData.password" placeholder="">
          </Input>
        </FormItem>
      </Form>
    </s-popup-box>
  </div>
</template>

<script>
import STable from "@/components/syh/s-Table/s-Table.vue";
import SDelButton from "@/components/syh/s-Button/s-DelButton.vue";
import SPage from "@/components/syh/s-Page/s-Page.vue";
import SPopupBox from "@/components/syh/s-PopupBox/s-PopupBox.vue";
const TableHead = [
  {
    type: "index",
    width: 80,
    align: "center",
    title: "序号",
  },
  {
    title: "平台ID",
    key: "name",
  },
  {
    title: "平台名称",
    key: "age",
  },
  {
    title: "平台系数",
    key: "address",
  },
  {
    title: "操作",
    slot: "action",
    width: 150,
    align: "center",
  },
];
const TableData = [
  {
    name: "John Brown",
    age: 18,
    address: "New York No. 1 Lake Park",
    date: "2016-10-03",
  },
  {
    name: "Jim Green",
    age: 24,
    address: "London No. 1 Lake Park",
    date: "2016-10-01",
  },
  {
    name: "Joe Black",
    age: 30,
    address: "Sydney No. 1 Lake Park",
    date: "2016-10-02",
  },
  {
    name: "John Brown",
    age: 18,
    address: "New York No. 1 Lake Park",
    date: "2016-10-03",
  },
  {
    name: "Jim Green",
    age: 24,
    address: "London No. 1 Lake Park",
    date: "2016-10-01",
  },
  {
    name: "Joe Black",
    age: 30,
    address: "Sydney No. 1 Lake Park",
    date: "2016-10-02",
  },
  {
    name: "John Brown",
    age: 18,
    address: "New York No. 1 Lake Park",
    date: "2016-10-03",
  },
  {
    name: "Jim Green",
    age: 24,
    address: "London No. 1 Lake Park",
    date: "2016-10-01",
  },
  {
    name: "Joe Black",
    age: 30,
    address: "Sydney No. 1 Lake Park",
    date: "2016-10-02",
  },
  {
    name: "John Brown",
    age: 18,
    address: "New York No. 1 Lake Park",
    date: "2016-10-03",
  },
  {
    name: "Jim Green",
    age: 24,
    address: "London No. 1 Lake Park",
    date: "2016-10-01",
  },
  {
    name: "Joe Black",
    age: 30,
    address: "Sydney No. 1 Lake Park",
    date: "2016-10-02",
  },
    {
    name: "Joe Black",
    age: 30,
    address: "Sydney No. 1 Lake Park",
    date: "2016-10-02",
  },
];
export default {
  name: "Platformnumsetting",
  data() {
    return {
      TableHead: TableHead,
      TableData: TableData,
      visible: false,
      formData: {},
      loading: false,
    };
  },
  components: {
    STable,
    SDelButton,
    SPage,
    SPopupBox,
  },
  mounted() {},

  methods: {
    remove(index) {
      console.log(index);
    },
    // 分页器
    pageChagne(val) {
      console.log("分页器", val);
    },
    /**
     * @description 打开编辑或添加弹框
     */
    openModul() {
      this.visible = true;
    },
    cancel() {
      this.visible = false;
    },
    ok() {
      //   this.visible = false;
      this.loading = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.platform-num-setting {
  height: 84vh;
  overflow: hidden;
  background: #fff;
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  text-align: right;
  margin-bottom: 10px;
}
.table-box {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.new-add-btn {
  width: 80px;
  height: 32px;
  background: #5272e2;
  border-radius: 2px;
  color: #fff;
  border: none;
  cursor: pointer;
}
.footer {
  margin-top: 24px;
}
.module-btn {
  display: flex;
  justify-content: center;
}
</style>